<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(green, blue, red);
    }

    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 200px;
      height: 200px;
      background: red;
      position: absolute;
      top: 300px;
      left: 400px;
    }

    #con {
      width: 100px;
      height: 100px;
      background: darkblue;
      position: absolute;
      top: 60px;
      left: 50px;
    }

    #btn {
      position: fixed;
      top: 300px;
      left: 50px;
    }

    ol li {
      background: darkorange;
    }

    #monday {
      width: 200px;
      height: 200px;
      padding: 50px;
      border: 10px solid red;
      background: darkturquoise;
    }
  </style>
</head>

<body>
  <div id="box">
    你好
    <div id="con"></div>
  </div>

  <ul>
    <li>车</li>
    <li>票子</li>
    <li>妹子</li>
  </ul>
  <ol>
    <li>房子</li>
    <li>马子</li>
    <li>凯子</li>
  </ol>
  <button id="btn">点击获取上滚动距离</button>
  <div id="monday">
    星期一
  </div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // jq操作css 
    // 设置单个样式
    $("#box").css("color", "blue")
    $("#box").css({ "color": "blue" })
    //设置多个样式
    $("#box").css({ "color": "blue", "font-size": "30px" })
    //设置css的回调函数
    $("ul li").css({
      width: function (index, oldVal) {
        console.log(index)//下标
        console.log(oldVal) //原来的值
        return (index + 1) * 100 + "px"
      },
      height: function (index, oldVal) {
        return (index + 1) * 30 + "px"
      },
      "background": "red"
    })
    //offset()  获取匹配元素在当前视口的相对偏移。获取到的数据{top:100,left:200}
    console.log($("#box").offset())//{top:300,left:400}
    console.log($("#box").offset().top)//300
    //position() 获取匹配元素相对父元素的偏移。
    console.log($("#con").position())//{top:60,left:50}
    //
    // btn.onclick=function(){}
    $("#btn").click(function () {
      console.log($("html,body").scrollTop())
      // scrollTop() 获取元素的上滚动距离  scrollTop(val)设置元素的滚动距离
      $("html,body").scrollTop(0)
      // scrollLeft() 获取元素的左滚动距离  scrollLeft(val)设置元素的左滚动距离
    })

    //width([val|fn]) 获取和设置元素的宽高
    //height()
    console.log($("ol li").width())
    $("ol li").width(400)
    $("ol li").height(function (index, oldVal) {
      if (index == 1) {
        return "500px"
      } else {
        return (index + 1) * 20 + "px"
      }
    })
    // width() height() 获取元素宽高    可以设置值                (不包括padding和border)
    console.log($("#monday").width())//200
    //  innerWidth 和innerHeigth获取第一个匹配元素内部区域宽度和高度（包括padding、不包括边框）。
    console.log($("#monday").innerWidth())//200+左右padding 50+50
    //  outerWidth 和 outerHeight获取第一个匹配元素内部区域宽度和高度（默认包括padding和边框）。
    console.log($("#monday").outerWidth())//200+左右padding +左右边框
    //
  </script>
</body>

</html>